<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>css3_demo</title>


    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
  <div class="container">
    <!-- <a style="width:149px;height:149px;position:fixed;top:0;right:0;z-index:9999;" href="https://github.com/chokcoco/css3-" target="_blank">
      <img src="http://chokcoco.github.io/demo/curveJS/images/forkme.png">
    </a> -->
    <!-- 立方体 -->
    <div class="demo-cube">
      <ul class="cube-inner">
        <li class="top"></li>
        <li class="bottom"></li>
        <li class="front"></li>
        <li class="back"></li>
        <li class="right"></li>
        <li class="left"></li>
      </ul>

      <!-- 正四面体 -->
      <ul class="cones-inner">
        <li class="bottom"></li>
        <li class="front"></li>
        <li class="right"></li>
        <li class="left"></li>
      </ul>

      <!-- 球体 -->
      <ul class="sphere-inner">
        <li class="a"></li>
        <li class="b"></li>
        <li class="c"></li>
        <li class="d"></li>
      </ul>
    </div>


    <!-- 3d照片墙 -->
    <div class="demo-perspective-photo">
      <div id="stage">
        <div id="container">
          <!-- 此处可上传自己的图片 -->
          <img src="../images/psb1.jpg" class='piece' style="-webkit-transform: rotateY(0deg) translateZ(196px);">
          <img src="../images/psb2.jpg" class='piece' style="-webkit-transform: rotateY(60deg) translateZ(196px);">
          <img src="../images/psb3.jpg" class='piece' style="-webkit-transform: rotateY(120deg) translateZ(196px);">
          <img src="../images/psb4.jpg" class='piece' style="-webkit-transform: rotateY(180deg) translateZ(196px);">
          <img src="../images/psb5.jpg" class='piece' style="-webkit-transform: rotateY(240deg) translateZ(196px);">
          <img src="../images/psb6.jpg" class='piece' style="-webkit-transform: rotateY(300deg) translateZ(196px);">
          
          <!-- 此处使用div代替 -->
          <!-- <div class='example' style=""><img alt="zhaopianb" src="../images/psb1.jpg" style="width: 70px;height: 40px;"></div>
          <div class='example' style=""></div>
          <div class='example' style=""></div>
          <div class='example' style=""></div>
          <div class='example' style=""></div>
          <div class='example' style=""></div> -->
        </div>
      </div>
    </div>

    <!-- music-->
    <div class="demo-music">
      <div class='music'>
        <ul id="waves" class="movement">
          <li class="li1"><span class='ani-li'></span></li>
          <li class="li2"><span class='ani-li'></span></li>
          <li class="li3"><span class='ani-li'></span></li>
          <li class="li4"><span class='ani-li'></span></li>
          <li class="li5"><span class='ani-li'></span></li>
          <li class="li6"><span class='ani-li'></span></li>
        </ul>
        <div class='music-state'></div>
      </div>
    </div>

    <!-- loading加载效果-->
    <div class="demo-loading">
      <div class='demo6'>
        <div class='demo6-x'>
          <div class='demo6-y'></div>
        </div>
      </div>

      <div class='demo8'>
        <div class='demo8-x'></div>
        <div class='demo8-y'></div>
        <div class='demo8-z'></div>
        <div class='demo8-m'></div>
      </div>

      <div class='demo10'>
        <div class='demo10-a'></div>
        <div class='demo10-b'></div>
        <div class='demo10-c'></div>
        <div class='demo10-d'></div>
        <div class='demo10-e'></div>
        <div class='demo10-f'></div>
        <div class='demo10-g'></div>
        <div class='demo10-h'></div>
        <div class='demo10-i'></div>
      </div>
    </div>

    <!--test-->
<!--     <div class="demo-cube-test">
      <ul class="cube-inner">
        <li class="top"></li>
        <li class="bottom"></li>
        <li class="front"></li>
        <li class="back"></li>
        <li class="right"></li>
        <li class="left"></li>
      </ul>
    </div> -->
  </div>
</html>
